<%@ taglib prefix="p" uri="/WEB-INF/tld/privilege.tld" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%     
	String path = request.getContextPath();     
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";     
%> 
<%response.setHeader("cache-control","public"); %>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>我的需求列表</title>
  <base href="<%=basePath%>"/>
     <%@ include file="../../list_include.jsp"%>
    <link rel="stylesheet" href="<%=basePath%>/js/lightbox/css/lightbox.css" type="text/css" />
    <script type="text/javascript" src="<%=basePath%>/js/lightbox/jquery.lightbox.js"></script>
    <script type="text/javascript" src="<%=basePath%>/js/autocomplete/jquery.autocomplete.min.js"></script>
    <link rel="Stylesheet" href="<%=basePath%>/js/autocomplete/jquery.autocomplete.css" />
	<style type="text/css"> 
		fieldset,table,tr,td {margin:0; padding:0;}
		td {padding:0 5px 0 10px;}
		form label {font-weight:bold;}
		#itemTable {margin:5px 0;}
	    .black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
        }
        .white_content {
            display: none;
            position: absolute;
            top: 30%;
            left: 30%;
            width: 35%;
            height: 43%;
            padding: 6px;
            border: 6px solid #FFFFFF;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
	</style>
  <script type="text/javascript">
    var curReqId =null;
	$(document).ready(function() { 
       	$("#reqTable").tablesorter({theme:'green', widgets:['zebra', "resizable"]});
       	
       	$("#btn_pageUp").click(function(){
			var curPage = $("#curPage").val();
			$("#curPage").val(parseInt(curPage) - 1);
			$("#reqForm").submit();
       	});
       	
       	$("#btn_pageDown").click(function(){
       		var curPage = $("#curPage").val();
			$("#curPage").val(parseInt(curPage) + 1);
			$("#reqForm").submit();
       	});
    	$("#cancel").click(function(){
    		document.getElementById('light').style.display='none';
    		document.getElementById('fade').style.display='none';
       	});
        $("#btn_insert").click(function(){
            var queryString = $("#reqForm").formSerialize();
            queryString = encodeURIComponent(queryString);
            location.href = "<%=basePath%>myreq/insert.do?qs=" + queryString;
        });
        
        $("#btn_search").click(function(){
            $("#curPage").val(1);
            $("#reqForm").submit();
        });
        //撤销
        $("#subrevoke").click(function(){
        	if($("#revoke").val() == "") 
     	    { 
     	    	alert("撤销理由不能为空！"); 
     	    	return false;
     	    }
        	if(curReqId == null)
        	{
        		alert("请选择需求");
        		return false;
        	}
     	    else{
     			$.get("myreq/revoke.do", {id:curReqId,revoke:$("#revoke").val()}, function(data) {
     				var result = $.parseJSON(data);
     				if(result.code == 1) {
     					alert("撤销成功!");
     					$("#btn_search").click();
     				} else {
     					alert(result.msg);
     				}
     			});
     	    }
        });
        
        $("#btn_change").click(function(){
            var page = parseInt($("#selectPage").val());
            var curPage = parseInt($("#curPage").val());
            if(curPage == page) return;
            $("#curPage").val(parseInt(page));
            $("#reqForm").submit();
        });
        
        //自动完成加载数据
        var list = null; 
        $.post("<%=basePath%>pjcost/project/getProjectByApplyUser.do",{isAll:'false'},function(data){
        	  list = eval(data);
        });
        $("#pName").autocomplete(list,{ 
        	  max: 12,             //列表里的条目数
              minChars: 0,         //自动完成激活之前填入的最小字符
              width: 400,          //提示的宽度，溢出隐藏
              scrollHeight: 300,   //提示的高度，溢出显示滚动条
              matchContains: true, //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
              autoFill: false,     //自动填充
        	  formatItem: function(item) { 
	             return item.name; 
	          } 
	     }).result(function(event,item) {   
	          $("#project").val(item.id);
         }); 
	});  
	function view(id) {
        var queryString = $("#reqForm").formSerialize();
        queryString = encodeURIComponent(queryString);
        location.href = "<%=basePath%>myreq/view.do?id=" + id + "&qs=" + queryString;
	}
	//单击撤销连接
    function revo(id) {
    	curReqId = id;
    	document.getElementById('light').style.display='block';
    	document.getElementById('fade').style.display='block';
    }
    //修改
	function edit(id) {
        var queryString = $("#reqForm").formSerialize();
        queryString = encodeURIComponent(queryString);
        location.href = "<%=basePath%>myreq/edit.do?id=" + id + "&qs=" + queryString+ "&pName=" + $("#pName").val();
	}	
    //删除
	function del(id) {
		if(confirm("确定删除该对象？") != 1) return;
		$.get("myreq/delete.do", {id:id}, function(data) {
			var result = $.parseJSON(data);
			if(result.code == 1) {
				alert("删除成功!");
				$("#btn_search").click();
			} else {
				alert(result.msg);
			}
		});
	}
    
  </script>
 </head>
 <body>
  <div>
    <fieldset>
      <legend>查询条件：</legend>
      <form id="reqForm" method="post" action="myreq/list.do">
        <table>
          <tr>
            <td><label for="title">标题：</label></td>
            <td><input type="text" name="title" id="title" value="${title}" style="width:288px;" /></td>
            <td><label for="reqType">类别：</label></td>
             <td>
               <select id="reqType" name="reqType" style="width:120px;">
                    <option value="" style="color:red">--选择类别--</option>
	                <c:forEach var="t" items="${allReqType}">
	                   <option value="${t.id}" <c:if test="${t.id == reqType}">selected="selected"</c:if>>${t.name}</option>
	                </c:forEach>
                </select>               
            </td>        
            <td><label for="reqType">状态：</label></td>      
            <td>
                <select id="status" name="status" style="width:120px;">
                    <option value="" style="color:red">--选择状态--</option>
	                <c:forEach var="s" items="${statusList}">
	                   <option value="${s.value}" <c:if test="${s.value == status}">selected="selected"</c:if>>${s.name}</option>
	                </c:forEach>
                </select>               
            </td>     
          </tr>
          <tr>    
			<td><label for="project">所属项目：</label></td>
			<td> 
			   <input type="hidden" name="project" id="project" value="${project}" />
			   <input id="pName" name="pName" value="${pName}" title="双击可以展开列表"  style="width:288px;"/>
			</td>
            <td><label for="sortTypes">排序方式：</label></td>      
            <td>
                <select id="sortType" name="sortType" style="width:120px;">
                    <option value="">需求添加时间</option>
                    <option value="newRepTime" <c:if test="${sortType == 'newRepTime'}">selected="selected"</c:if>>最新回复时间</option>
                    <option value="perStaTime" <c:if test="${sortType == 'perStaTime'}">selected="selected"</c:if>>预计开始时间</option>
                </select>               
            </td>                  
            <td><input type="submit" id="btn_search" name="btn_search" value="查询" style="width:80px;" /></td>
          </tr>
        </table>
        <input type="hidden" name="curPage" id="curPage" value="${curPage}" />
        <input type="hidden" name="totalPage" id="totalPage" value="${totalPage}" />
      </form>
    </fieldset>
  </div>
  <div>
  	<table id="reqTable" class="tablesorter">
	  <thead> 
	    <tr> 
          <th width="30%">标题</th> 
          <th>期望完成时间</th>
          <th>预期开始时间</th>
          <th>最新回复时间</th>
          <th>负责方</th>
          <th>类型</th>
          <th>负责人</th>
          <th>状态</th>
          <th>操作</th>
 	    </tr> 
	  </thead>
	  <tbody>
	  	<c:forEach items="${reqList}" var="req" varStatus="status">
		  	<tr>
			  	  <td>${req.title}</td>
			  	  <td>
		            <fmt:formatDate value="${req.expPerTime}" type="both"	dateStyle="medium" timeStyle="medium" /> 
		          </td>
		          <td>
		            <fmt:formatDate value="${req.perStaTime}" type="both" dateStyle="medium" timeStyle="medium" />
		          </td>
		          <td>
		            <fmt:formatDate value="${req.newRepTime}" type="both" dateStyle="medium" timeStyle="medium" />
		          </td>
		          <td>
			          <c:forEach items="${sList}" var="s" varStatus="status">
						       <c:if test="${req.startStatus == s.value}">
						          ${s.name}
						       </c:if>
					   </c:forEach>
			      </td>
		          <td>
		             <c:if test="${req.reqType == null}">
					          未分发
					 </c:if>
					 <c:if test="${req.reqType != null}">
					    ${req.typeName}
					 </c:if>
		          </td>
		          <td>
		              ${req.principal}
		          </td>
		          <td>
		              <c:forEach items="${itemList}" var="item" varStatus="status">
					       <c:if test="${req.status == item.value}">
					          ${item.name}
					       </c:if>
					  </c:forEach>
		          </td>
			  	  <td>
		             <a href=# onclick="javascript:view('${req.id}'); return false;">查看</a>
		             <c:if test="${req.status != 'closed' }">
					  	  	<p:chkPri actionUrl="myreq/edit.do"><a href="#" onclick="javascript:edit('${req.id}'); return false;">修改</a></p:chkPri>
					  	   	<c:if test="${req.status == 'submitted'}"> 
						  	    <p:chkPri actionUrl="myreq/revoke.do">
						  	       <a href ="#"  onclick = "javascript:revo('${req.id}'); return false;">撤销</a>
						  	    </p:chkPri>
					  	    </c:if>
					  	  	<c:if test="${req.status == 'submitted' || req.status == 'undone'}">
							     <p:chkPri actionUrl="myreq/delete.do"><a href="#" onclick="javascript:del('${req.id}'); return false;">删除</a></p:chkPri>
							</c:if>
					 </c:if>
			  	  </td>
		  	</tr>
	  	</c:forEach>
	  </tbody>
  	</table>
  </div>
  <div id="light" class="white_content">
       <h4>添写理由</h4>
       <hr></hr>
	   <table style="table-layout:fixed">
	     <tr>
		       <td width="25%" valign="top" ><label for="title">撤销理由：</label></td>
		       <td><textarea id = "revoke" rows="8" cols="30"></textarea></td>
	     </tr>
	     <tr>
		       <td></td>
		       <td>
		          <input type="button" id="subrevoke" value ="提交" />
		          <input type="button" id="cancel" value ="取消" />
		       </td>
	     </tr>
	  </table>
  </div>
  <div id="fade" class="black_overlay"></div>
  <div>
      <div style="float:left;">
        <p:chkPri actionUrl="myreq/insert.do"><input id="btn_insert" type="button" value="新增" /></p:chkPri>
      </div>
      <div style="text-align:right;">
        <c:if test="${curPage <= 1}"><input type="button" disabled="disabled" id="btn_pageUp" value="上一页"/></c:if>
        <c:if test="${curPage > 1}"><input type="button" id="btn_pageUp" value="上一页"/></c:if>
        <c:if test="${curPage >= totalPage}"><input type="button" id="btn_pageDown" disabled="disabled" value="下一页"/></c:if>
        <c:if test="${curPage < totalPage}"><input type="button" id="btn_pageDown" value="下一页"/></c:if>
                     共${totalPage}页/共${totalRecords}条
        <select id="selectPage" style="width: auto;">
            <c:forEach var="i" begin="1" end="${totalPage}">
                <option id="${i}" <c:if test="${i == curPage}">selected="selected"</c:if>>${i}</option>
            </c:forEach>
        </select>
        <input id="btn_change" type="button" value="转至" />
      </div>
  </div>
 </body>
</html>

